<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { getCollect } from "@/api/student/my/my";
import { cancelCollect } from "@/api/student/my/my";
import router from "@/router";

const collect: any = reactive([[]]);
onMounted(() => {
  getCollect(1).then((res) => {
    collect.length = 0;
    if (res.data.msg == "请求成功") {
      collect.push(res.data.data);
    }
  });
});

//取消赞
const cancle = (id: any) => {
  cancelCollect(id).then((res) => {
    getCollect(1).then((res) => {
      collect.length = 0;
      if (res.data.msg == "请求成功") {
        collect.push(res.data.data);
      }
    });
  });
};

//去往课程详情
const goClass = (id: any) => {
  router.push("/TeachersDetail");
};
</script>
<!--课程收藏-->
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <h3 class="Title">课程收藏</h3>
        </el-header>
        <el-main class="main">
          <template v-if="collect[0].length == 0">
            <el-empty description="description" />
          </template>
          <template v-else v-for="item in collect[0]">
            <div class="box">
              <div class="pic" @click="goClass(item.id)">图片</div>
              <a class="txt1">{{ item.className }}</a>
              <div>
                <a href="" class="txt">
                  <span>{{ item.classDetail }}</span>
                  <div>
                    <span class="txt3">{{ item.price }}元|</span>
                    <span class="txt2">{{ item.application }}人最近报名</span>
                  </div>
                </a>
                <div>
                  <el-button class="btn" type="primary" @click="cancle(item.id)"
                    >取消收藏</el-button
                  >
                </div>
              </div>
            </div>
          </template>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.Title {
  color: #23b8ff;
  font-weight: bold;
}
.txt {
  float: left;
  color: #aaaaaa;
}

.txt1 {
  margin-top: 10px;
  margin-bottom: 10px;
  color: black;
}

.txt2 {
  margin-left: 5px;
}

.txt3 {
  color: #f66b2d;
}

.box {
  width: 200px;
  margin: 10px;
  float: left;
}

.pic {
  width: 200px;
  height: 120px;
  background-color: #23b8ff;
}

.main {
  background-color: white;
  font-size: 13px;
}

.btn {
  width: 60px;
  height: 17px;
  font-size: 13px;
  margin-left: 15px;
  margin-top: 15px;
}
</style>
